<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏加载中</title>
    <!-- 移除base标签，使用绝对路径加载资源 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .loader-container {
            text-align: center;
        }
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        .game-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        .btn {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        .btn:hover {
            background-color: #45a049;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loader-container" id="loader-container">
        <div class="loading-spinner"></div>
        <h2>正在加载游戏资源...</h2>
    </div>

    <div id="game-ready" style="display: none;">
        <h2>游戏加载完成!</h2>
        <button id="start-game-btn" class="btn">开始游戏</button>
    </div>

    <div id="game-container" class="game-container"></div>

    <script>
        // 从URL获取游戏路径参数
        const urlParams = new URLSearchParams(window.location.search);
        const gamePath = urlParams.get('path');
        let gameFiles = null;

        // 如果没有游戏路径参数，显示错误
        if (!gamePath) {
            document.getElementById('loader-container').innerHTML = '<h2 style="color: red;">错误：未指定游戏</h2>';
        } else {
            // 加载游戏文件
            loadGameFiles(gamePath);
        }

        /**
         * 加载游戏文件
         * @param {string} gamePath - 游戏目录路径
         */
        function loadGameFiles(gamePath) {
            console.log('加载游戏路径:', gamePath);
            fetch(`/api/game/${gamePath}/files`)
                .then(response => {
                    console.log('API响应状态:', response.status);
                    if (!response.ok) {
                        return response.text().then(text => {
                            throw new Error(`API错误: ${response.status} - ${text.substring(0, 200)}`);
                        });
                    }
                    return response.json();
liangg1                })

                .then(files => {
                    console.log('成功加载游戏文件:', files);
                    // 按类型分离文件
                    const cssFiles = files.filter(file => file.endsWith('.css'));
                    const jsFiles = files.filter(file => file.endsWith('.js'));
                    console.log('CSS文件列表:', cssFiles);
                    console.log('JS文件列表:', jsFiles);
                    gameFiles = files;
                    // 显示开始游戏按钮
                    document.getElementById('loader-container').style.display = 'none';
                    document.getElementById('game-ready').style.display = 'block';
                })
                .catch(error => {
                    const errorMsg = error.message || '未知错误';
                    console.error('完整错误信息:', error);
                    console.error('错误堆栈:', error.stack);
                    document.getElementById('loader-container').innerHTML = `<div style="color: red; padding: 20px;"><h2>加载失败: ${errorMsg}</h2><p>错误详情: ${JSON.stringify(error)}</p><p>堆栈跟踪: ${error.stack || '无'}</p></div>`;
                    console.error('加载游戏文件时出错:', error);
                    // 添加错误详情到控制台以便调试
                    console.error('游戏加载详细错误:', error);
                });

    // 窗口关闭时清理资源
    window.addEventListener('beforeunload', () => {
        // 移除动态注入的脚本和样式
        document.querySelectorAll('#game-scripts script, #game-styles link').forEach(el => el.remove());
        
        // 清除游戏实例（如果存在销毁方法）
        if (window.gameInstance && typeof window.gameInstance.destroy === 'function') {
            window.gameInstance.destroy();
        }
    });
        }

        /**
         * 开始游戏
         */
        const startBtn = document.getElementById('start-game-btn');
        console.log('开始按钮元素:', startBtn);
        startBtn.addEventListener('click', function() {
            console.log('开始游戏按钮点击');
            if (gameFiles) {
                const gameContainer = document.getElementById('game-container');
                // 隐藏开始游戏按钮
                document.getElementById('game-ready').style.display = 'none';
                // 注入游戏内容
                // 注入HTML内容
                gameContainer.innerHTML = gameFiles.html;

                // 加载CSS文件
                cssFiles.forEach(file => {
                    const link = document.createElement('link');
                    console.log('加载CSS文件:', file);
                    link.rel = 'stylesheet';
                    link.href = `/${gamePath}/${file}`;
                    gameContainer.appendChild(link);
                });

                // 加载JS文件
                jsFiles.forEach(file => {
                    const script = document.createElement('script');
                    console.log('加载JS文件:', file);
                    script.src = `/${gamePath}/${file}`;
                    gameContainer.appendChild(script);
                });
            }
        });
    </script>
</body>
</html>